<script setup lang="ts">
import { reactive } from 'vue';
import Echarts from '@/components/ReEcharts/index.vue';

let valueList = [30, 50, 60, 65, 70, 80, 90, 100, 120];
let colorList = ['#FAAD14', '#13C2C2', '#14A8FF', '#23D688', '#397EF0'];
let fontSizeList = [12, 14, 16, 18];
let data = [];

let nameList = reactive(['领导力', '专注力', '海外账号', '特殊关键词', '短视频产品', '重大议题', '哈哈哈哈哈', '影响力', '机构']);
nameList.forEach((item, index) => {
  let valueIndex = index % valueList.length;
  let colorIndex = index % colorList.length;
  let fontSizeIndex = index % fontSizeList.length;

  data.push({
    name: item,
    value: valueList[valueIndex],
    label: {
      color: colorList[colorIndex],
      fontSize: fontSizeList[fontSizeIndex]
    }
  });
});

const option = reactive({
  title: {
    text: '词云图小样'
  },
  color: colorList,
  graphic: [
    {
      id: 'baPng',
      type: 'image',
      left: 'center',
      top: 'center',
      style: {
        image:
          '',
        width: '400',
        height: '400'
      }
    }
  ],
  series: [
    {
      type: 'graph',
      layout: 'force',
      force: {
        repulsion: 85,
        edgeLength: 85,
        layoutAnimation: true,
        friction: 0.3
      },
      roam: false,
      symbol: '',
      symbolSize: 0,
      label: {
        show: true,
        color: 'auto'
      },
      draggable: false,
      data: data
    }
  ]
});
</script>

<template>
  <div :style="{ height: '480px' }">
    <Echarts :option="option" />
  </div>
</template>
